import { defineStore } from "pinia";
import { store } from "/@/store";

const darkModeKey = "__dark_mode__";
const isDarkMode = () => {
	const darkMode = window.localStorage.getItem(darkModeKey);
	if (darkMode) {
		return darkMode === "true";
	} else {
		return window.matchMedia("(prefers-color-scheme: dark)").matches;
	}
};

export const useDarkModeStore = defineStore({
	id: "dark-mode",
	state: () => ({
		darkMode: isDarkMode(),
	}),
	actions: {
		toggleDarkMode() {
			this.darkMode = !this.darkMode;
			if (this.darkMode) {
				document.documentElement.classList.add("dark");
				window.localStorage.setItem(darkModeKey, "true");
			} else {
				document.documentElement.classList.remove("dark");
				window.localStorage.setItem(darkModeKey, "false");
			}
		},
	},
});

export function useDarkModeStoreHook() {
	return useDarkModeStore(store);
}
